<template>
  <div>
    <div>
      姓名:{{ person.name }} 年龄:{{ person.age }} <button @click="addPersonAge">成长</button>
    </div>
    <div>年龄:{{ age }} <button @click="addAge">成长</button></div>
    <div>一辆:{{ car.name }} 价格:{{ car.price }}万 <button @click="addPrice">涨价</button></div>
    <div>
      动物:{{ name }} 颜色:{{ color }} 名字:{{ mingzi }}<button @click="changeColor">变色</button>
      <button @click="changeType">变种</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRef, toRefs } from 'vue'

const person = ref({ name: '小明', age: 10 })
function addPersonAge() {
  person.value.age++
}

const age = ref(18)
function addAge() {
  age.value++
}

const car = reactive({ name: '奔驰', price: 100 })
console.log(car)
function addPrice() {
  car.price++
}

const animal = reactive({ name: 'dog', color: 'red' })
const { name, color } = toRefs(animal)
const mingzi = toRef(animal, 'name')
console.log(mingzi)
console.log(name)

function changeColor() {
  color.value = '绿色'
}
function changeType() {
  animal.name = '猫'
}

//https://www.bilibili.com/video/BV1Za4y1r7KE/?p=16&spm_id_from=pageDriver&vd_source=a424c1030aabca45fc21f07995bd8035
</script>

<style lang="scss" scoped></style>
